<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>M3U8 在线播放器</title>
     <meta name="description" content="M3U8 在线播放器, 支持视频直播等各种媒体源在线播放, 提供流畅的观看体验. 同时提供解析M3U8链接, 自动选择最高清下载.">

    <!-- 关键词 -->
    <meta name="keywords" content="M3U8, 在线播放器, 视频播放, 流媒体, 网络电视">
    <script src="js/hls.min.js"></script>
    <link rel="preload" as="script" href="js/hls.min.js">
    <link rel="icon" type="image/png" href="img/favicon.ico">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #f5f5f5;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            width: 100%;
            max-width: 900px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 24px;
        }

        .input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        input[type="text"] {
            flex: 1;
            padding: 12px 16px;
            font-size: 16px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            transition: all 0.3s ease;
            outline: none;
            min-width: 0;
        }

        input[type="text"]:focus {
            border-color: #2196f3;
            box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
        }

        button {
            padding: 12px 24px;
            font-size: 16px;
            font-weight: 500;
            color: white;
            background: #2196f3;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        button:hover {
            background: #1976d2;
            transform: translateY(-1px);
        }

        button:active {
            transform: translateY(0);
        }

        .video-container {
            position: relative;
            width: 100%;
            background: #000;
            border-radius: 8px;
            overflow: hidden;
            margin-top: 10px;
            aspect-ratio: 16 / 9;
        }

        video {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 8px;
            object-fit: contain;
        }

        .loading {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            background: rgba(0, 0, 0, 0.7);
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 14px;
        }

        .loading.active {
            display: block;
        }

        .button-group {
            display: flex;
            gap: 10px;
        }

        .download-btn {
            background: #4caf50;
        }

        .download-btn:hover {
            background: #388e3c;
        }

        .progress-bar {
            display: none;
            width: 100%;
            height: 4px;
            background: #e0e0e0;
            border-radius: 2px;
            margin-top: 10px;
        }

        .progress-bar-fill {
            width: 0%;
            height: 100%;
            background: #4caf50;
            border-radius: 2px;
            transition: width 0.3s ease;
        }

        .progress-text {
            font-size: 14px;
            color: #666;
            margin-top: 5px;
            text-align: center;
        }

        .history-container {
            margin-top: 20px;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }

        .history-title {
            font-size: 16px;
            color: #333;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .history-list {
            display: flex;
            flex-direction: column;
            height: 185px;
            overflow-y: auto;
            padding-right: 8px;
        }

        .history-list::-webkit-scrollbar {
            width: 6px;
        }

        .history-list::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }

        .history-list::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 3px;
        }

        .history-list::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .history-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 40px 8px 12px;
            background: #f8f9fa;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }

        .history-item:hover {
            background: #e9ecef;
        }

        .history-content {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-right: 8px;
            min-width: 0;
        }

        .history-url {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 10px;
            color: #495057;
            max-width: 674px;
            min-width: 0;
        }

        .history-url:hover::after {
            display: flex;
            content: attr(data-full-url);
            position: absolute;
            left: 0;
            top: 100%;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            z-index: 1000;
            white-space: normal;
            word-wrap: break-word;
            word-break: break-all;
            max-width: calc(100% - 20px);
            min-width: 0;
            font-size: 14px;
            line-height: 1.4;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .history-time {
            font-size: 12px;
            color: #868e96;
            min-width: 100px;
            text-align: right;
            white-space: nowrap;
        }

        .delete-history {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-image: url(img/del.png);
            background-size: cover;
            cursor: pointer;
            /*opacity: 0;*/
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            user-select: none;
        }

        .history-item:hover .delete-history {
            opacity: 1;
            transform: translateY(-50%) scale(1);
        }

        .delete-history:hover {
            transform: translateY(-50%) scale(1.15);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        }

        .delete-history:active {
            transform: translateY(-50%) scale(0.95);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .clear-history {
            font-size: 14px;
            color: #dc3545;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .clear-history:hover {
            background: #ffebee;
        }

        .no-history {
            color: #868e96;
            text-align: center;
            padding: 20px;
            font-style: italic;
        }

        .quality-selector, .speed-selector {
            position: relative;
        }

        .control-btn {
            background: transparent;
            color: rgba(255, 255, 255, 0.9);
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 14px;
            line-height: 20px;
            display: flex;
            align-items: center;
            transition: all 0.2s ease;
        }

        .control-btn:hover {
            color: #fff;
        }

        .quality-menu, .speed-menu {
            position: absolute;
            bottom: 45px;  /* 位于按钮上方 */
            left: 50%;
            transform: translateX(-50%);
            background: rgba(28, 28, 28, 0.95);
            border-radius: 6px;
            padding: 6px 0;
            min-width: 100px;
            display: none;
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
        }

        /* 菜单小三角 */
        .quality-menu::after, .speed-menu::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid rgba(28, 28, 28, 0.95);
        }

        .quality-item, .speed-item {
            padding: 8px 16px;
            color: rgba(255, 255, 255, 0.8);
            cursor: pointer;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .quality-item:hover, .speed-item:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .quality-item.active, .speed-item.active {
            color: #2196f3;
        }

        .quality-item.active::after, .speed-item.active::after {
            content: '✓';
            margin-left: 8px;
            font-size: 12px;
        }

        /* 菜单显示动画 */
        @keyframes menuFadeIn {
            from {
                opacity: 0;
                transform: translateX(-50%) translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }

        .quality-menu.show, .speed-menu.show {
            display: block;
            animation: menuFadeIn 0.2s ease;
        }


        /* 视频容器 */
        .video-container {
            position: relative;
            width: 100%;
            background: #000;
            border-radius: 8px;
            overflow: hidden;
            margin-top: 10px;
            aspect-ratio: 16 / 9;
        }

        /* 视频元 */
        video {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 自定义控件容器 */
        .custom-controls {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .video-container:hover .custom-controls {
            opacity: 1;
        }

        /* 控制栏 */
        .controls-bar {
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* 左侧控件 */
        .left-controls {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .play-pause {
            background: none;
            border: none;
            padding: 5px;
            cursor: pointer;
            width: 32px;
            height: 32px;
        }

        .play-pause svg {
            width: 100%;
            height: 100%;
            fill: white;
        }

        .pause-icon {
            display: none;
        }

        .time-display {
            color: white;
            font-size: 14px;
        }

        /* 右侧控件 */
        .right-controls {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        /* 保持原有的quality-selector和speed-selector样式 */

        .fullscreen-btn {
            background: none;
            border: none;
            padding: 5px;
            cursor: pointer;
            width: 32px;
            height: 32px;
        }

        .fullscreen-btn svg {
            width: 100%;
            height: 100%;
            fill: white;
        }

        /* 悬浮效果 */
        .play-pause:hover, .fullscreen-btn:hover {
            transform: scale(1.1);
        }

        .play-pause:active, .fullscreen-btn:active {
            transform: scale(0.95);
        }

        /* 音量控制样式 */
        .volume-control {
            position: relative;
            display: flex;
            align-items: center;
        }

        .volume-btn {
            background: none;
            border: none;
            padding: 5px;
            cursor: pointer;
            width: 32px;
            height: 32px;
            z-index: 2;
        }

        .volume-btn svg {
            width: 100%;
            height: 100%;
            fill: white;
        }

        .volume-slider {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            height: 0;
            visibility: hidden;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 4px;
            padding: 10px 12px;
            opacity: 0;
            transition: all 0.2s ease;
        }

        .volume-control:hover .volume-slider {
            height: 100px;
            visibility: visible;
            opacity: 1;
        }

        .volume-slider-bar {
            position: relative;
            height: 80px;
            width: 6px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            cursor: pointer;
            margin: 0 auto;
        }

        .volume-slider-bar::before {
            content: '';
            position: absolute;
            top: -10px;
            bottom: -10px;
            left: -10px;
            right: -10px;
            cursor: pointer;
        }

        .volume-slider-fill {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #fff;
            border-radius: 3px;
            transition: height 0.1s ease;
        }

        .volume-slider-handle {
            position: absolute;
            left: 50%;
            width: 14px;
            height: 14px;
            background: #fff;
            border-radius: 50%;
            transform: translate(-50%, 50%);
            opacity: 0;
            transition: opacity 0.2s;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
        }

        .volume-slider-handle::before {
            content: '';
            position: absolute;
            top: -10px;
            bottom: -10px;
            left: -10px;
            right: -10px;
            cursor: pointer;
        }

        .volume-slider:hover .volume-slider-handle {
            opacity: 1;
        }

        /* 下载进度条样式 */
        .progress-bar {
            width: 100%;
            height: 4px;
            background: #e0e0e0;
            border-radius: 2px;
            margin-top: 10px;
        }

        .progress-bar-fill {
            width: 0%;
            height: 100%;
            background: #4caf50;
            border-radius: 2px;
            transition: width 0.3s ease;
        }

        .progress-text {
            font-size: 14px;
            color: #666;
            margin-top: 5px;
            text-align: center;
        }

        /* 视频播放进度条样式 */
        .video-progress-bar {
            position: relative;
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: height 0.1s ease;
        }

        .video-progress-bar:hover {
            height: 6px;
        }

        .video-progress-loaded {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: rgba(255, 255, 255, 0.3);
            transition: width 0.2s ease;
        }

        .video-progress-current {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: #2196f3;
            transition: width 0.1s ease;
        }

        .video-progress-handle {
            position: absolute;
            top: 50%;
            width: 12px;
            height: 12px;
            background: #2196f3;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.2s;
        }

        .video-progress-bar:hover .video-progress-handle {
            opacity: 1;
        }

        @media (max-width: 512px) {
            input[type="text"],
            button {
                padding: 8px 8px;
                font-size: 14px;
            }
            
        }

        /* 添加或更新媒体查询样式 */
        @media screen and (max-width: 768px) {
            .controls-bar .left-controls {
                gap: 8px;  /* 减小控件间距 */
            }

            .controls-bar .time-display {
                font-size: 12px;  /* 减小字体大小 */
            }

            .controls-bar .play-pause {
                width: 28px;  /* 减小按钮大小 */
                height: 28px;
            }

            .controls-bar .volume-control {
                display: none;  /* 在移动端隐藏音量控制 */
            }

            .controls-bar .right-controls {
                gap: 10px;
            }

        }

        @media screen and (max-width: 480px) {
            .controls-bar {
                padding: 8px 10px;  /* 减小内边距 */
            }

            .controls-bar .left-controls {
                gap: 10px;  /* 进一步减小控件间 */
            }

            .controls-bar .right-controls {
                gap: 10px;
            }

            .controls-bar .control-btn {
                padding: 4px 4px;
                font-size: 12px;
            }

        }

        /* 在媒体查询部分添加以下样式 */
        @media screen and (max-width: 768px) {
            .quality-selector .control-btn,
            .speed-selector .control-btn {
                padding: 4px 8px;
                font-size: 12px;
            }

            .quality-menu, .speed-menu {
                min-width: 75px;
                padding: 0px 0;
            }

            .quality-item, .speed-item {
                padding: 3px 10px;
                font-size: 12px;
            }
        }

        @media screen and (max-width: 480px) {
            .quality-selector .control-btn,
            .speed-selector .control-btn {
                padding: 3px 6px;
                font-size: 12px;
            }

            .quality-menu, .speed-menu {
                min-width: 70px;
                padding: 0px 0;
            }

            .quality-item, .speed-item {
                padding: 3px 10px;
                font-size: 11px;
            }

            /* 调整菜单位置，避免超出屏幕 */
            .quality-menu, .speed-menu {
                bottom: 35px;
            }

            /* 调整菜单小三角的位置 */
            .quality-menu::after, .speed-menu::after {
                bottom: -5px;
                border-width: 5px;
            }
        }

        .donate-container {
            text-align: center;
            margin-top: 20px;
        }

        .donate-btn {
            background: #ff4081;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .donate-btn:hover {
            background: #f50057;
            transform: translateY(-2px);
        }

        .donate-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            animation: fadeIn 0.3s ease;
        }

        .donate-modal-content {
            position: relative;
            background: white;
            width: 90%;
            max-width: 400px;
            margin: 100px auto;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            animation: slideIn 0.3s ease;
        }

        .donate-close {
            position: absolute;
            right: 15px;
            top: 10px;
            font-size: 24px;
            color: #666;
            cursor: pointer;
            transition: color 0.2s ease;
        }

        .donate-close:hover {
            color: #333;
        }

        .donate-modal h3 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

        .qrcode-container {
            display: flex;
            justify-content: space-around;
            gap: 20px;
        }

        .qrcode-item {
            text-align: center;
        }

        .qrcode-item img {
            width: 150px;
            height: 150px;
            border: 1px solid #eee;
            border-radius: 4px;
        }

        .qrcode-item p {
            margin-top: 10px;
            color: #666;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideIn {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* 移动端适配 */
        @media screen and (max-width: 480px) {
            .donate-modal-content {
                width: 95%;
                margin: 50px auto;
            }

            .qrcode-container {
                flex-direction: column;
                align-items: center;
            }

            .qrcode-item img {
                width: 120px;
                height: 120px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="input-group">
        <input type="text" id="m3u8Input" placeholder="请输入m3u8视频链接" value="https://vip.lz-cdn5.com/20220914/42199_41e5bfff/index.m3u8">
        <div class="button-group">
            <button onclick="playVideo()">播放</button>
            <button onclick="downloadVideo()" class="download-btn">下载</button>
        </div>
    </div>
    <div class="progress-bar" id="progressBar" style="display: none;">
        <div class="progress-bar-fill" id="progressBarFill"></div>
    </div>
    <div class="progress-text" id="progressText"></div>

    <div class="video-container">
        <video id="videoPlayer" playsinline webkit-playsinline></video>
        <div id="loading" class="loading">加载中...</div>
        
        <!-- 自定义控件 -->
        <div class="custom-controls">
            <!-- 进度条 -->
            <div class="video-progress-bar">
                <div class="video-progress-loaded"></div>
                <div class="video-progress-current"></div>
                <div class="video-progress-handle"></div>
            </div>
            
            <!-- 底部控制栏 -->
            <div class="controls-bar">
                <!-- 左侧控件 -->
                <div class="left-controls">
                    <button class="play-pause">
                        <svg class="play-icon" viewBox="0 0 24 24">
                            <path d="M8 5v14l11-7z"/>
                        </svg>
                        <svg class="pause-icon" viewBox="0 0 24 24">
                            <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                        </svg>
                    </button>
                    <!-- 添加音量控制 -->
                    <div class="volume-control">
                        <button class="volume-btn">
                            <svg class="volume-high-icon" viewBox="0 0 24 24">
                                <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
                            </svg>
                            <svg class="volume-low-icon" viewBox="0 0 24 24" style="display: none;">
                                <path d="M7 9v6h4l5 5V4L11 9H7z"/>
                            </svg>
                            <svg class="volume-mute-icon" viewBox="0 0 24 24" style="display: none;">
                                <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
                            </svg>
                        </button>
                        <div class="volume-slider">
                            <div class="volume-slider-bar">
                                <div class="volume-slider-fill"></div>
                                <div class="volume-slider-handle"></div>
                            </div>
                        </div>
                    </div>
                    <div class="time-display">
                        <span class="current-time">0:00</span>
                        <span class="time-separator">/</span>
                        <span class="total-time">0:00</span>
                    </div>
                </div>
                
                <!-- 右侧控件 -->
                <div class="right-controls">
                    <div class="quality-selector">
                        <button class="control-btn">自动</button>
                        <div class="quality-menu" id="qualityMenu">
                            <div class="quality-item active" data-level="-1" onclick="switchQuality(-1)">自动</div>
                            <!-- 其他画质选项会通过JavaScript动态添加 -->
                        </div>
                    </div>
                    <div class="speed-selector">
                        <button class="control-btn">1.0x</button>
                        <div class="speed-menu" id="speedMenu">
                            <div class="speed-item" onclick="setPlaybackSpeed(2)">2.0x</div>
                            <div class="speed-item" onclick="setPlaybackSpeed(1.5)">1.5x</div>
                            <div class="speed-item" onclick="setPlaybackSpeed(1.25)">1.25x</div>
                            <div class="speed-item" onclick="setPlaybackSpeed(1)" data-default>1.0x</div>
                            <div class="speed-item" onclick="setPlaybackSpeed(0.75)">0.75x</div>
                            <div class="speed-item" onclick="setPlaybackSpeed(0.5)">0.5x</div>
                        </div>
                    </div>
                    <button class="fullscreen-btn">
                        <svg viewBox="0 0 24 24">
                            <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="history-container">
        <div class="history-title">
            <span>播放历史</span>
            <span class="clear-history" onclick="clearHistory()">清空历史</span>
        </div>
        <div class="history-list" id="historyList">
            <!-- 历史记录将通过 JavaScript 动态添加 -->
        </div>
    </div>
    <div class="donate-container">
        <button class="donate-btn">打赏</button>
        <div class="donate-modal">
            <div class="donate-modal-content">
                <span class="donate-close">&times;</span>
                <h3>感谢支持</h3>
                <div class="qrcode-container">
                    <div class="qrcode-item">
                        <img src="img/wechat.jpg" alt="微信支付">
                        <p>微信支付</p>
                    </div>
                    <div class="qrcode-item">
                        <img src="img/alipay.jpg" alt="支付宝">
                        <p>支付宝</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const hlsConfig = {
        autoStartLoad: true,          // 自动开始加载
        startLevel: -1,              // 自动选择最佳品质
        maxBufferLength: 240,         // 缓冲区长度（秒）
        maxBufferSize: 100 * 1000 * 1000,  // 缓冲区大小限制为10MB，避免内存占用过大
        enableWorker: true,          // 启用Web Worker提高性能
        debug: false,                // 关闭调试模式
        progressive: true,           // 启用渐进式加载
        // 加载超时设置
        manifestLoadingTimeOut: 10000,    // manifest加载超时时间
        manifestLoadingMaxRetry: 1,       // manifest加载重试次数
        levelLoadingTimeOut: 10000,       // level加载超时时间
        fragLoadingTimeOut: 20000,        // 片段加载超时时间
        // ABR（自适应码率）配置
        abrEwmaDefaultEstimate: 500000,   // 默认带宽估计
        abrEwmaFastLive: 3,              // 快速带宽估计权重
        abrEwmaSlowLive: 9,              // 慢速带宽估计权重
        abrMaxWithRealBitrate: true,     // 使用实际码率
        // 预加载设置
        preloadTime: 240,                  // 预加载时长（秒）
        maxMaxBufferLength: 240,           // 最大缓冲区长度
        startFragPrefetch: true,          // 开始预加载片段
        // 错误恢复
        maxFragLookUpTolerance: 0.25,     // 片段查找容差
        liveSyncDurationCount: 3,         // 直播同步持续时间计数
        liveMaxLatencyDurationCount: 10   // 最大延迟持续时间计数
    };

    let currentHls = null;
    const loading = document.getElementById('loading');
    const qualityBtn = document.querySelector('.quality-selector .control-btn');
    const speedBtn = document.querySelector('.speed-selector .control-btn');
    // 定时器, 用于隐藏移动端底部控制栏
    let mobileControlsTimeout;

    function playVideo() {
        const video = document.getElementById('videoPlayer');
        const url = document.getElementById('m3u8Input').value;

        if (!url) {
            alert('请输入视频链接');
            return;
        }

        addToHistory(url);

        if (currentHls) {
            currentHls.destroy();
        }

        loading.classList.add('active');

        if (Hls.isSupported()) {
            currentHls = new Hls(hlsConfig);

            currentHls.on(Hls.Events.MANIFEST_LOADING, function () {
                loading.textContent = '正在加载视频信息...';
            });

            currentHls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
                loading.textContent = '正在缓冲...';
                const bestLevel = data.levels.length - 1;
                currentHls.currentLevel = bestLevel;

                const playPromise = video.play();
                if (playPromise !== undefined) {
                    playPromise.catch(() => {
                        video.muted = true;
                        video.play();
                    });
                }

                // 生成清晰度菜单
                const qualityMenu = document.getElementById('qualityMenu');
                qualityMenu.innerHTML = data.levels.map((level, index) => {
                    const resolution = level.height + 'p';
                    return `<div class="quality-item" data-level="${index}" onclick="switchQuality(${index})">${resolution}</div>`;
                }).join('');

                // 设置默认清晰度（使用之前声明的bestLevel变量）
                document.querySelector(`[data-level="${bestLevel}"]`).classList.add('active');
                qualityBtn.textContent = document.querySelector(`[data-level="${bestLevel}"]`).textContent;
            });

            currentHls.on(Hls.Events.LEVEL_LOADED, function () {
                loading.classList.remove('active');
            });

            currentHls.on(Hls.Events.FRAG_LOADED, function () {
                if (loading.classList.contains('active')) {
                    loading.classList.remove('active');
                }
            });

            currentHls.on(Hls.Events.ERROR, function (event, data) {
                if (data.fatal) {
                    switch (data.type) {
                        case Hls.ErrorTypes.NETWORK_ERROR:
                            loading.textContent = '网络错误，正在重试...';
                            currentHls.startLoad();
                            break;
                        case Hls.ErrorTypes.MEDIA_ERROR:
                            loading.textContent = '媒体错误，正在恢复...';
                            currentHls.recoverMediaError();
                            break;
                        default:
                            currentHls.destroy();
                            loading.textContent = '视频加载失败';
                            setTimeout(() => loading.classList.remove('active'), 2000);
                            break;
                    }
                }
            });

            video.preload = 'auto';

            currentHls.loadSource(url);
            currentHls.attachMedia(video);

            // 播放速度
            video.playbackRate = parseFloat(document.querySelector(".speed-item.active").textContent)

            // 添加跳转相关的事件处理
            video.addEventListener('seeking', function () {
                loading.classList.add('active');
                loading.textContent = '正在缓冲...';
            });

            video.addEventListener('seeked', function () {
                loading.classList.remove('active');
            });

            // 添加缓冲
            video.addEventListener('waiting', function () {
                loading.classList.add('active');
                loading.textContent = '正在缓冲...';
            });

            video.addEventListener('playing', function () {
                loading.classList.remove('active');
            });

            // 优化缓冲策略
            currentHls.on(Hls.Events.FRAG_CHANGED, function () {
                if (video.buffered.length) {
                    const bufferedEnd = video.buffered.end(video.buffered.length - 1);
                    const duration = video.duration;
                    const bufferedPercent = (bufferedEnd / duration) * 100;

                    // 如果缓冲足够，移除加载提示
                    if (bufferedPercent > 5) {
                        loading.classList.remove('active');
                    }
                }
            });

        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = url;
            video.play();
            loading.classList.remove('active');
        } else {
            alert('您的浏览器不支持播放M3U8视频');
            loading.classList.remove('active');
        }
    }

    document.getElementById('m3u8Input').addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            playVideo();
        }
    });

    async function downloadVideo() {
        const url = document.getElementById('m3u8Input').value;
        if (!url) {
            alert('请输入视频链接');
            return;
        }

        const progressBar = document.getElementById('progressBar');
        const progressBarFill = document.getElementById('progressBarFill');
        const progressText = document.getElementById('progressText');

        try {
            progressBar.style.display = 'block';
            progressText.textContent = '正在解析视频信息...';

            const response = await fetch(url);
            const m3u8Content = await response.text();
            console.log('M3U8内容:', m3u8Content);

            const lines = m3u8Content.split('\n');
            const tsUrls = [];
            let baseUrl = url.substring(0, url.lastIndexOf('/') + 1);

            // 处理主播放列表
            if (m3u8Content.includes('#EXT-X-STREAM-INF')) {
                console.log('检测到主播放列表');

                // 存储所有可用的清晰度
                const qualities = [];

                for (let i = 0; i < lines.length; i++) {
                    if (lines[i].includes('#EXT-X-STREAM-INF')) {
                        const streamInfo = lines[i];
                        const resolution = streamInfo.match(/RESOLUTION=(\d+x\d+)/);
                        const bandwidth = streamInfo.match(/BANDWIDTH=(\d+)/);
                        const subPath = lines[i + 1].trim();

                        qualities.push({
                            resolution: resolution ? resolution[1] : '',
                            bandwidth: bandwidth ? parseInt(bandwidth[1]) : 0,
                            path: subPath
                        });
                    }
                }

                // 按带宽排序，选择最高清的版本
                qualities.sort((a, b) => b.bandwidth - a.bandwidth);
                console.log('可用清晰度:', qualities);

                // 使用最高清晰度的链接
                const highestQuality = qualities[0];
                const subUrl = highestQuality.path.startsWith('http')
                    ? highestQuality.path
                    : new URL(highestQuality.path, baseUrl).href;

                console.log('选择最高清晰度:', highestQuality);
                console.log('子M3U8链接:', subUrl);

                const subResponse = await fetch(subUrl);
                const subM3u8Content = await subResponse.text();
                lines.length = 0;
                lines.push(...subM3u8Content.split('\n'));
                baseUrl = subUrl.substring(0, subUrl.lastIndexOf('/') + 1);
            }

            // 解析ts片段
            const segments = [];
            let currentTsUrl = '';
            let lastByteRangeEndOffset = 0;

            for (let i = 0; i < lines.length; i++) {
                const line = lines[i].trim();
                
                if (line.startsWith('#EXT-X-BYTERANGE:')) {
                    // 解析BYTERANGE
                    const rangeInfo = line.substring('#EXT-X-BYTERANGE:'.length);
                    let [length, offset] = rangeInfo.split('@').map(n => parseInt(n));
                    if (isNaN(offset)) {
                        offset = lastByteRangeEndOffset;
                    }
                    lastByteRangeEndOffset = offset + length;
                    
                    segments.push({
                        url: currentTsUrl,
                        byteRange: {
                            start: offset,
                            end: offset + length - 1
                        }
                    });
                } else if (line && !line.startsWith('#')) {
                    // 处理ts URL
                    currentTsUrl = line.startsWith('http') 
                        ? line 
                        : new URL(line, baseUrl).href;
                    
                    // 如果没有BYTERANGE，将整个文件作为一个片段
                    if (!lines[i-1]?.startsWith('#EXT-X-BYTERANGE:')) {
                        segments.push({
                            url: currentTsUrl,
                            byteRange: null
                        });
                    }
                }
            }

            console.log(`找到 ${segments.length} 个视频片段`);
            progressText.textContent = '开下载视频片段...';
            
            const chunks = [];
            const totalSegments = segments.length;

            // 下载片段
            for (let i = 0; i < totalSegments; i++) {
                try {
                    progressText.textContent = `正在下载片段 ${i + 1}/${totalSegments}`;
                    progressBarFill.style.width = `${((i + 1) / totalSegments) * 100}%`;

                    const segment = segments[i];
                    console.log(`开始下载片段 ${i + 1}/${totalSegments}: ${segment.url}`);
                    
                    // 添加Range请求头（如果需要）
                    const headers = new Headers();
                    if (segment.byteRange) {
                        headers.append('Range', `bytes=${segment.byteRange.start}-${segment.byteRange.end}`);
                        console.log(`使用Range: bytes=${segment.byteRange.start}-${segment.byteRange.end}`);
                    }

                    const tsResponse = await fetch(segment.url, { headers });
                    
                    if (!tsResponse.ok && !tsResponse.status === 206) {
                        console.error(`片段 ${i + 1} 下载失败: HTTP ${tsResponse.status}`);
                        throw new Error(`HTTP error! status: ${tsResponse.status}`);
                    }
                    
                    const tsBuffer = await tsResponse.arrayBuffer();
                    console.log(`片段 ${i + 1} 下载成功，大小: ${(tsBuffer.byteLength / 1024).toFixed(2)}KB`);
                    chunks.push(new Uint8Array(tsBuffer));
                    
                    await new Promise(resolve => setTimeout(resolve, 50));
                    
                } catch (error) {
                    console.error(`下载片段 ${i + 1}/${totalSegments} 失败:`, error);
                    console.log(`1秒后重试下载片段 ${i + 1}`);
                    i--;
                    await new Promise(resolve => setTimeout(resolve, 1000));
                    continue;
                }
            }

            if (chunks.length === 0) {
                throw new Error('没有成功下载任何视频片段');
            }

            console.log(`所有片段下载完成，共 ${chunks.length} 个片段`);
            progressText.textContent = '正在合并视频片段...';

            const totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0);
            console.log(`总文件大小: ${(totalLength / 1024 / 1024).toFixed(2)}MB`);

            // 直接合并并下载ts文件
            const mergedVideo = new Uint8Array(totalLength);

            let offset = 0;
            for (const chunk of chunks) {
                mergedVideo.set(chunk, offset);
                offset += chunk.length;
            }

            // 创建下载
            const blob = new Blob([mergedVideo], {type: 'video/MP2T'});
            const downloadUrl = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = downloadUrl;
            a.download = 'video.ts';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(downloadUrl);

            progressText.textContent = '下载完成！';
            setTimeout(() => {
                progressBar.style.display = 'none';
                progressText.textContent = '';
            }, 3000);

        } catch (error) {
            console.error('下载错误:', error);
            progressText.textContent = `下载失败: ${error.message}`;
            setTimeout(() => {
                progressBar.style.display = 'none';
                progressText.textContent = '';
            }, 3000);
        }
    }

    function addToHistory(url) {
        const history = JSON.parse(localStorage.getItem('m3u8History') || '[]');

        const filteredHistory = history.filter(item => item.url !== url);

        filteredHistory.unshift({
            url: url,
            time: new Date().toISOString()
        });

        if (filteredHistory.length > 20) {
            filteredHistory.pop();
        }

        localStorage.setItem('m3u8History', JSON.stringify(filteredHistory));
        updateHistoryDisplay();
    }

    function updateHistoryDisplay() {
        const historyList = document.getElementById('historyList');
        const history = JSON.parse(localStorage.getItem('m3u8History') || '[]');

        if (history.length === 0) {
            historyList.innerHTML = '<div class="no-history">暂无播放历史</div>';
            return;
        }

        historyList.innerHTML = history.map((item, index) => {
            const date = new Date(item.time);
            const formattedTime = `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;

            return `
                    <div class="history-item">
                        <div class="history-content" onclick="playHistoryItem('${item.url}')">
                            <div class="history-url" data-full-url="${item.url}">${item.url}</div>
                            <div class="history-time">${formattedTime}</div>
                        </div>
                        <div class="delete-history" onclick="deleteHistoryItem(${index})" title="删除"></div>
                    </div>
                `;
        }).join('');
    }

    function playHistoryItem(url) {
        document.getElementById('m3u8Input').value = url;
        playVideo();
    }

    function clearHistory() {
        if (confirm('确定要清空播放历史吗？')) {
            localStorage.removeItem('m3u8History');
            updateHistoryDisplay();
        }
    }

    function deleteHistoryItem(index) {
        event.stopPropagation();

        const history = JSON.parse(localStorage.getItem('m3u8History') || '[]');
        history.splice(index, 1);
        localStorage.setItem('m3u8History', JSON.stringify(history));
        updateHistoryDisplay();
    }

    document.addEventListener('DOMContentLoaded', function () {
        updateHistoryDisplay();
    });

    function switchQuality(level) {
        if (currentHls) {
            currentHls.currentLevel = level;
            // 更新菜单项状态
            document.querySelectorAll('.quality-item').forEach(item => {
                item.classList.remove('active');
            });
            document.querySelector(`[data-level="${level}"]`).classList.add('active');
        }
    }

    function setPlaybackSpeed(speed) {
        const video = document.getElementById('videoPlayer');
        video.playbackRate = speed;
        // 更新菜单项状态
        document.querySelectorAll('.speed-item').forEach(item => {
            item.classList.remove('active');
        });
        document.querySelector(`.speed-item[onclick="setPlaybackSpeed(${speed})"]`).classList.add('active');
    }


    // 获取所有需要的元素
    const video = document.getElementById('videoPlayer');
    const container = document.querySelector('.video-container');
    const controls = document.querySelector('.custom-controls');
    const playPauseBtn = document.querySelector('.play-pause');
    const playIcon = document.querySelector('.play-icon');
    const pauseIcon = document.querySelector('.pause-icon');
    const currentTimeDisplay = document.querySelector('.current-time');
    const totalTimeDisplay = document.querySelector('.total-time');
    const fullscreenBtn = document.querySelector('.fullscreen-btn');

    // 播放/暂停控制
    playPauseBtn.addEventListener('click', togglePlay);

    function togglePlay() {
        if (video.paused) {
            video.play();
            playIcon.style.display = 'none';
            pauseIcon.style.display = 'block';
        } else {
            video.pause();
            playIcon.style.display = 'block';
            pauseIcon.style.display = 'none';
        }
    }


    // 进度条点击和拖动事件
    progressBar.addEventListener('mousedown', function(e) {
        const rect = progressBar.getBoundingClientRect();
        const pos = (e.clientX - rect.left) / rect.width;
        video.currentTime = pos * video.duration;
        
        function onMouseMove(e) {
            const pos = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
            video.currentTime = pos * video.duration;
        }
        
        function onMouseUp() {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        }
        
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
    });

    // 确保事件监听器正确绑定
    video.addEventListener('timeupdate', updateVideoProgress);
    video.addEventListener('progress', updateVideoLoaded);
    video.addEventListener('loadedmetadata', function() {
        totalTimeDisplay.textContent = formatTime(video.duration);
        updateVideoProgress();
    });

    // 全屏控制
    fullscreenBtn.addEventListener('click', toggleFullscreen);

    async function toggleFullscreen() {
        if (!document.fullscreenElement) {
            try {
                await container.requestFullscreen();
            } catch (err) {
                console.error('全屏切换失败:', err);
            }
        } else {
            document.exitFullscreen();
        }
    }

    // 格式化时间显示
    function formatTime(seconds) {
        const minutes = Math.floor(seconds / 60);
        seconds = Math.floor(seconds % 60);
        return `${minutes}:${seconds.toString().padStart(2, '0')}`;
    }

    // 视频播放状态变化时更新按钮示
    video.addEventListener('play', () => {
        playIcon.style.display = 'none';
        pauseIcon.style.display = 'block';
    });

    video.addEventListener('pause', () => {
        playIcon.style.display = 'block';
        pauseIcon.style.display = 'none';
    });

    // 鼠标移入显示控件
    container.addEventListener('mousemove', () => {
        controls.style.opacity = '1';
    });

    // 鼠标移出隐藏控件
    container.addEventListener('mouseleave', () => {
        if (!video.paused) {
            clearTimeout(mobileControlsTimeout)
            controls.style.opacity = '0';
        }
    });

    // 键盘快捷键
    document.addEventListener('keydown', (e) => {
        if (e.code === 'Space') {
            e.preventDefault();
            togglePlay();
        } else if (e.code === 'ArrowLeft') {
            video.currentTime -= 5;
        } else if (e.code === 'ArrowRight') {
            video.currentTime += 5;
        } else if (e.code === 'ArrowUp') {
            video.volume = Math.min(1, video.volume + 0.1);
        } else if (e.code === 'ArrowDown') {
            video.volume = Math.max(0, video.volume - 0.1);
        }
    });

    // 清晰度和倍速菜单的显示/隐藏
    document.querySelectorAll('.control-btn').forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.stopPropagation();
            const menu = btn.nextElementSibling;
            
            // 关闭其他菜单
            document.querySelectorAll('.quality-menu, .speed-menu').forEach(m => {
                if (m !== menu) {
                    m.classList.remove('show');
                    m.previousElementSibling.classList.remove('active');
                }
            });

            // 切换当前菜单
            menu.classList.toggle('show');
            btn.classList.toggle('active');
            
            // 旋转箭头
            btn.style.setProperty('--rotation', menu.classList.contains('show') ? '180deg' : '0deg');
        });
    });

    // 点击其他区域关闭菜单
    document.addEventListener('click', () => {
        document.querySelectorAll('.quality-menu, .speed-menu').forEach(menu => {
            menu.classList.remove('show');
            menu.previousElementSibling.classList.remove('active');
        });
    });

    // 防止点击菜单项时关闭菜单
    document.querySelectorAll('.quality-menu, .speed-menu').forEach(menu => {
    menu.addEventListener('click', (e) => {
        const clickedElement = e.target; // 获取点击的元素

        if (clickedElement.classList.contains('quality-item')) {
            qualityBtn.textContent = clickedElement.textContent;
        } else if (clickedElement.classList.contains('speed-item')) {
            speedBtn.textContent = clickedElement.textContent;
        }
    });
});


    // 添加音量控制相关代码
    const volumeControl = document.querySelector('.volume-control');
    const volumeBtn = document.querySelector('.volume-btn');
    const volumeSlider = document.querySelector('.volume-slider-bar');
    const volumeFill = document.querySelector('.volume-slider-fill');
    const volumeHandle = document.querySelector('.volume-slider-handle');
    const volumeHighIcon = document.querySelector('.volume-high-icon');
    const volumeLowIcon = document.querySelector('.volume-low-icon');
    const volumeMuteIcon = document.querySelector('.volume-mute-icon');

    // 更新音量显示
    function updateVolumeDisplay() {
        const volume = video.volume;
        volumeFill.style.height = `${volume * 100}%`;
        volumeHandle.style.bottom = `${volume * 100}%`;

        // 更新图标
        volumeHighIcon.style.display = 'none';
        volumeLowIcon.style.display = 'none';
        volumeMuteIcon.style.display = 'none';

        if (video.muted || volume === 0) {
            volumeMuteIcon.style.display = 'block';
        } else if (volume < 0.5) {
            volumeLowIcon.style.display = 'block';
        } else {
            volumeHighIcon.style.display = 'block';
        }
    }

    // 音量滑块控制
    volumeSlider.addEventListener('click', (e) => {
        e.stopPropagation();
        const rect = volumeSlider.getBoundingClientRect();
        const pos = 1 - Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
        video.volume = pos;
        video.muted = false;
        updateVolumeDisplay();
    });

    // 音量拖动
    volumeSlider.addEventListener('mousedown', (e) => {
        e.stopPropagation();
        
        function onMouseMove(e) {
            const rect = volumeSlider.getBoundingClientRect();
            const pos = 1 - Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
            video.volume = pos;
            video.muted = false;
            updateVolumeDisplay();
        }

        function onMouseUp() {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        }

        onMouseMove(e); // 立即更新音量
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
    });

    // 音量按钮点击切换静音
    volumeBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        video.muted = !video.muted;
        updateVolumeDisplay();
    });

    // 防止音量控制的点击事件传播
    volumeControl.addEventListener('click', (e) => {
        e.stopPropagation();
    });

    // 初始化音量显示
    video.addEventListener('loadedmetadata', () => {
        updateVolumeDisplay();
    });

    // 监听音量变化
    video.addEventListener('volumechange', () => {
        updateVolumeDisplay();
    });

    // 获取视频进度条相关元素
    const videoProgressBar = document.querySelector('.video-progress-bar');
    const videoProgressLoaded = document.querySelector('.video-progress-loaded');
    const videoProgressCurrent = document.querySelector('.video-progress-current');
    const videoProgressHandle = document.querySelector('.video-progress-handle');

    // 更新视频播放进度
    function updateVideoProgress() {
        if (!isNaN(video.duration)) {
            const percent = (video.currentTime / video.duration) * 100;
            videoProgressCurrent.style.width = `${percent}%`;
            videoProgressHandle.style.left = `${percent}%`;
            currentTimeDisplay.textContent = formatTime(video.currentTime);
        }
    }

    // 更新视频加载进度
    function updateVideoLoaded() {
        if (video.buffered.length > 0) {
            const loadedEnd = video.buffered.end(video.buffered.length - 1);
            const loadedPos = loadedEnd / video.duration;
            videoProgressLoaded.style.width = `${loadedPos * 100}%`;
        }
    }

    // 进度条点击和拖动事件
    videoProgressBar.addEventListener('mousedown', function(e) {
        e.preventDefault();
        const rect = videoProgressBar.getBoundingClientRect();
        const pos = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
        
        // 立即更新进度条位置
        updateProgressUI(pos);
        
        // 设置视频时间
        video.currentTime = pos * video.duration;

        function onMouseMove(e) {
            const pos = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
            // 立即更新进度条位置
            updateProgressUI(pos);
            video.currentTime = pos * video.duration;
        }

        function onMouseUp() {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        }

        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
    });

    // 更新进度条UI的函数
    function updateProgressUI(pos) {
        videoProgressCurrent.style.width = `${pos * 100}%`;
        videoProgressHandle.style.left = `${pos * 100}%`;
        // 更新时间显示
        const currentTime = pos * video.duration;
        currentTimeDisplay.textContent = formatTime(currentTime);
    }

    // 视频时间更新事件
    video.addEventListener('timeupdate', function() {
        if (!isNaN(video.duration)) {
            const pos = video.currentTime / video.duration;
            updateProgressUI(pos);
        }
    });

    // 视频加载进度更新
    video.addEventListener('progress', function() {
        if (video.buffered.length > 0) {
            const loadedEnd = video.buffered.end(video.buffered.length - 1);
            const loadedPos = loadedEnd / video.duration;
            videoProgressLoaded.style.width = `${loadedPos * 100}%`;
        }
    });

    document.addEventListener('DOMContentLoaded', function() {

        // // 初始化倍速菜单
        const currentSpeed = 1.0;
         // 获取视频元素
        const video = document.getElementById('videoPlayer');
        const videoContainer = document.querySelector('.video-container');
        // 捐献
        const donateBtn = document.querySelector('.donate-btn');
        const donateModal = document.querySelector('.donate-modal');
        const donateClose = document.querySelector('.donate-close');

        document.querySelector(`.speed-item[onclick="setPlaybackSpeed(${currentSpeed})"]`).classList.add('active');

        // 添加视频区域点击事件
        videoContainer.addEventListener('click', function(e) {

            // 检查是否为移动端
            if (/Mobi|Android/i.test(navigator.userAgent)) {
                controls.style.opacity = '1';
                clearTimeout(mobileControlsTimeout);
                mobileControlsTimeout = setTimeout(() => {
                    if (!video.paused) {
                        controls.style.opacity = '0';
                    }
                }, 3000);
            }

            // 确保点击不是在控制栏上
            else if (!e.target.closest('.custom-controls') &&
                !e.target.closest('.quality-menu') && 
                !e.target.closest('.speed-menu')) {
                if (video.paused) {
                    video.play();
                    playIcon.style.display = 'none';
                    pauseIcon.style.display = 'block';
                } else {
                    video.pause();
                    playIcon.style.display = 'block';
                    pauseIcon.style.display = 'none';
                }
            }
        });

        // 添加鼠标指针样式
        videoContainer.addEventListener('mousemove', function(e) {
            if (!e.target.closest('.custom-controls') && 
                !e.target.closest('.quality-menu') && 
                !e.target.closest('.speed-menu')) {
                this.style.cursor = 'pointer';
            } else {
                this.style.cursor = 'default';
            }
        });

        // 防止双击选中文本
        videoContainer.addEventListener('mousedown', function(e) {
            if (!e.target.closest('.custom-controls')) {
                e.preventDefault();
            }
        });

        // 添加双击全屏功能
        let lastClickTime = 0;
        videoContainer.addEventListener('click', function(e) {

            // 检查是否为移动端
            if (/Mobi|Android/i.test(navigator.userAgent)) {
                return; // 如果是移动端，直接返回，不执行后续逻辑
            }

            const currentTime = new Date().getTime();
            const timeDiff = currentTime - lastClickTime;

            if (timeDiff < 300) { // 双击判断阈值
                // 切换全屏
                if (!document.fullscreenElement) {
                    videoContainer.requestFullscreen();
                } else {
                    document.exitFullscreen();
                }
                e.preventDefault(); // 防止触发单击事件
            }

            lastClickTime = currentTime;
        });

        // 更新播放/暂停图标状态
        video.addEventListener('play', function() {
            playIcon.style.display = 'none';
            pauseIcon.style.display = 'block';
        });

        video.addEventListener('pause', function() {
            playIcon.style.display = 'block';
            pauseIcon.style.display = 'none';
        });

         // 打开弹窗
        donateBtn.addEventListener('click', function() {
            donateModal.style.display = 'block';
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        });

        // 关闭弹窗
        donateClose.addEventListener('click', function() {
            donateModal.style.display = 'none';
            document.body.style.overflow = '';
        });

        // 点击背景关闭弹窗
        donateModal.addEventListener('click', function(e) {
            if (e.target === donateModal) {
                donateModal.style.display = 'none';
                document.body.style.overflow = '';
            }
        });
    });

</script>
</body>
</html> 